<template>
  <div class="root">
    <!-- <div class="my-sidebar-menu"> -->
    <sidebar-menu
      :menu="menu"
      relative
      theme="white-theme"
      width="20%"
      id="my-sidebar-menu"
      class="my-sidebar-menu"
      ><span slot="toggle-icon"><i class="el-icon-more"></i></span>
    </sidebar-menu>
    <!-- </div> -->
    <div class="router-view" id="router-view">
      <transition name="card-fade"><router-view /></transition>
    </div>
    <div style="clear: both; height: 4%"></div>
    <Bottom style="margin-left:230px;height : 55%" />
  </div>
</template>

<script>
import Bottom from "@/components/Bottom";
export default {
  components: {
    Bottom,
  },
  watch: {
    $route(to, from) {
      this.to = to.path//从哪来
      this.from = from.path
    },
    from(newData){
       //document.getElementById("my-sidebar-menu").style.height = document.getElementById("router-view").clientHeight + "px";
    }
  },
  created(){
      this.$router.push('/home/second_page/my_orders')
  },
  mounted() {
  },
  data() {
    return {
      menu: [
        {
          header: true,
          title: "我的交易",
          hiddenOnCollapse: true,
        },
        {
          href: "/home/second_page/my_orders",
          title: "我的订单",
          icon: "el-icon-document-copy",
        },
        {
          href: "/home/second_page/funnel",
          title: "销售统计",
          icon: "el-icon-notebook-2",
        },
        {
          href: "/home/second_page/profit_and_loss",
          title: "盈亏统计",
          icon: "el-icon-bank-card",
        }
      ],
      to : '',
      from : ''
    };
  },
};
</script>
<style lang="scss" scoped>
.root {
  height: 700px;
  // border: 1px solid red;
  .my-sidebar-menu {
    width: 20%;
    height: 100%;
    background-image: url(/images/bg7.jpg);
    background-size: 100% 100%;
    float: left;
    margin: 5px 0 0 0;
  }
  .router-view {
    float: left;
    width: 79%;
    height: 700px;
    margin: 5px 0 0 0;

    //border: 1px solid green;
  }
}
.card-fade-enter-active {
  animation: bounce-in 2s;
}
</style>